<template>
  <div class="familyDetail">
    <a-card :loading="cardLoading" :bordered="false" style="height: 100%; margin-bottom: 20px">
      <family-header></family-header>
    </a-card>

  <a-card>
     <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="品牌名称">
              <a-input placeholder="请选择品牌名称" v-model="queryParam.brandId" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="材料名称">
              <a-input placeholder="请选择材料名称" v-model="queryParam.materialId" />
            </a-form-item>
          </a-col>
          

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <!-- <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('price_material')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
        @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      
      <j-super-query :fieldList="superFieldList" ref="superQueryModal"
        @handleSuperQuery="handleSuperQuery"></j-super-query>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div> -->
  </a-card>
    <!-- 查询区域-END -->
    <!-- 主信息 -->
    <a-card style="margin-bottom: 20px">
      <div style="padding:0 80px">
        <div>{{ info.familyName }}</div>
        <img src="~@/assets/zaiban.png" alt="" style="width:50px;height:50px" />
      </div>
      <div class="main-info">
        <div class="main-flex">
          <div v-for="(item, index) in mainInfo" :key="index" class="info-item">
            <span class="label">{{ item.attriName }}</span>
            <span class="text">{{ item.text }}</span>
          </div>
        </div>
      </div>
    </a-card>
    <!-- 表格 -->
    <a-card>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        rowKey="id"
        :columns="columns"
        :dataSource="list"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
      >
        <template slot="action" slot-scope="text, record">
          <a-button type="text" @click="exportDetail(record)">导出</a-button>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import FamilyHeader from './components/familyHeader.vue'
export default {
  components: {
    FamilyHeader
  },
  data() {
    return {
      description: '族库详情',
      cardLoading: false,
      queryParam:[],
      familyId: '',
      // 主信息
      info: {},
      // 表格
      loading: false,
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '来源',
          align: 'center',
          dataIndex: 'originId_dictText'
        },
        {
          title: '品牌',
          align: 'center',
          dataIndex: 'brandId_dictText'
        },
        {
          title: '报价说明',
          align: 'center',
          dataIndex: 'price'
        },
        {
          title: '报价时间',
          align: 'center',
          dataIndex: 'quotationTime',
          scopedSlots: { customRender: 'quotationTime' }
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 表格数据
      list: [],
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      url: {
        list: '/familylibrary_list/familylibraryList_A/list',
        mainInfo: '/info/familylibraryInfo/list' // 获取族基本信息
      }
    }
  },
  mounted() {
    let { familyId } = this.$route.query
    this.familyId = familyId
    this.getList()
    this.getMainInfo()
  },
  methods: {
    // 获取列表
    getList() {
      let params = {
        pageSize: this.ipagination.pageSize,
        pageNo: this.ipagination.current,
        familyId: this.familyId
      }
      getAction(this.url.list, { ...params }).then(res => {
        if (res.success) {
          this.list = res.result.records || res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    // 获取主信息
    getMainInfo() {
      getAction(this.url.mainInfo, { familyId: this.familyId }).then(res => {
        if (res.success) {
          let infoResult = res.result.records || res.result
          this.info = infoResult[0]
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    exportDetail(record) {
      this.$message.success(`导出${record.id}成功`)
    }
  },
  computed: {
    mainInfo() {
      const { familyName, familyType, familyUnit, familyDes } = this.info
      return [
        { attriName: '族名称', text: familyName },
        {
          attriName: '族类别',
          text: familyType
        },
        {
          attriName: '族单位',
          text: familyUnit
        },
        {
          attriName: '族说明',
          text: familyDes
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.familyDetail {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0 50px;
  > div {
    width: 80%;
    margin: 0 auto;
  }
  .main-info {
    .main-flex {
      display: flex;
      width: 100%;
      justify-content: center;
      .info-item {
        border: 1px solid #eee;
        padding: 10px;
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        > .label {
          display: block;
          font-size: 14px;
        }
        > .text {
          display: block;
          padding-top: 5px;
        }
      }
    }
  }
}
</style>
